{% extends "base.html" %}

{% block title %}PDF转Word{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <h2 class="mb-4">
            <i class="fas fa-file-pdf text-danger"></i> PDF转Word工具
        </h2>
        
        <div class="card">
            <div class="card-body">
                <form id="pdfToWordForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="pdfFile" class="form-label">选择PDF文件 <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="pdfFile" name="file" accept=".pdf" required>
                        <div class="form-text">支持最大16MB的PDF文件</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="docTitle" class="form-label">文档标题</label>
                        <input type="text" class="form-control" id="docTitle" name="title" placeholder="可选">
                    </div>
                    
                    <div class="mb-3">
                        <label for="dpi" class="form-label">图片分辨率（DPI）</label>
                        <select class="form-select" id="dpi" name="dpi">
                            <option value="150">150 (较快)</option>
                            <option value="200" selected>200 (推荐)</option>
                            <option value="300">300 (高质量)</option>
                        </select>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-danger btn-lg">
                            <i class="fas fa-exchange-alt"></i> 开始转换
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div id="progressBar" class="mt-3" style="display: none;">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%">
                    处理中...
                </div>
            </div>
        </div>
        
        <div id="resultMessage" class="mt-3"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('#pdfToWordForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        $('#progressBar').show();
        $('#resultMessage').html('');
        
        $.ajax({
            url: '{{ url_for("tools.convert_pdf_to_word") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#progressBar').hide();
                if (response.success) {
                    $('#resultMessage').html(`
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> ${response.message}
                            <a href="{{ url_for('tools.download_file', filename='') }}${response.filename}" class="btn btn-sm btn-success ms-2">
                                <i class="fas fa-download"></i> 下载Word文档
                            </a>
                        </div>
                    `);
                } else {
                    $('#resultMessage').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> ${response.message}
                        </div>
                    `);
                }
            },
            error: function() {
                $('#progressBar').hide();
                $('#resultMessage').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i> 转换失败，请稍后重试
                    </div>
                `);
            }
        });
    });
});
</script>
{% endblock %}

